import React, { Component } from "react";
import { StyleSheet, Text, View, TouchableOpacity, } from "react-native";
import NavigationBar from 'react-native-navbar-plus';
import ViewUtil from "../util/ViewUtil";
import { WebView } from 'react-native-webview';
import FontAwesome from 'react-native-vector-icons/FontAwesome'
import NavigationUtil from "../navigator/NavigationUtil";
import { isIPhoneX } from 'react-native-isiphonex-device'
import BackPressComponent from "../common/BackPressComponent";
import FavoriteDao from "../expand/dao/FavoriteDao";
const TRENDING_URL = 'https://github.com/';
const THEME_COLOR = '#678'
export default class Index extends Component {

    constructor(props) {
        super(props)
        // 从导航器里面取出参数
        // this.params = this.props.navigation.state.params;
        this.params = this.props.route.params
        const { projectModels, flag } = this.params

        this.favoriteDao = new FavoriteDao(flag);
        this.url = projectModels.item.html_url || TRENDING_URL + projectModels.item.fullName;
        const title = projectModels.item.full_name || projectModels.item.fullName;

        this.state = {
            title: title,
            url: this.url,
            canGoBack: false,
            isFavorite: projectModels.isFavorite

        }
        this.backPress = new BackPressComponent({ backPress: () => this.onBackPress() });
    }

    componentDidMount() {
        this.backPress.componentDidMount();
    }

    componentWillUnmount() {
        this.backPress.componentWillUnmount();
    }

    onBackPress() {
        this.onBack();
        return true
    }
    onBack() {
        // 如果能跳转到上一级,就跳转到上一级
        if (this.state.canGoBack) {
            this.webView.goBack();
        } else {
            NavigationUtil.goBack(this.props.navigation);
        }

    }
    onFavoriteButtonClick() {
        const { projectModels, callBack } = this.params;
        const isFavorite = projectModels.isFavorite = !projectModels.isFavorite;
        callBack(isFavorite);//更新Item的收藏状态
        this.setState({
            isFavorite: isFavorite,
        });
        let key = projectModels.item.fullName ? projectModels.item.fullName : projectModels.item.id.toString();
        if (projectModels.isFavorite) {
            this.favoriteDao.saveFavoriteItem(key, JSON.stringify(projectModels.item));
        } else {
            this.favoriteDao.removeFavoriteItem(key);
        }
    }
    renderRightButton() {
        return (<View style={{ flexDirection: 'row' }}>
            <TouchableOpacity
                onPress={() => this.onFavoriteButtonClick()}
            >
                <FontAwesome
                    name={this.state.isFavorite ? 'star' : 'star-o'}
                    size={20}
                    style={{ color: 'white', marginRight: 10 }}
                />
            </TouchableOpacity>
            {ViewUtil.getShareButton(() => { })}
        </View>)
    }
    onNavigationStateChange(navState) {
        this.setState({
            canGoBack: navState.canGoback,
            url: navState.url,
        })
    }
    render() {
        const { theme } = this.params
        const titleLayoutStyle = this.state.title.length > 20 ? { paddingRight: 30 } : null
        let navigationBar = <NavigationBar
            leftButton={ViewUtil.getLeftBackButton(() => this.onBack())}
            title={this.state.title}
            titleLayoutStyle={titleLayoutStyle}
            style={theme.styles.navBar}
            rightButton={this.renderRightButton()}
        />
        return (
            <View style={styles.container}>
                {navigationBar}
                <WebView
                    ref={webView => this.webView = webView}
                    startInLoadingState={true}
                    onNavigationStateChange={e => this.onNavigationStateChange(e)}
                    source={{ uri: this.state.url }}
                />
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        marginTop: isIPhoneX ? 30 : 0
    }
})